<template>
  <div class="app-container">
    <!--查询表单-->
    <div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row style="display:flex">
          <el-col :span="7">
            <el-form-item label="角色名称">
              <el-input style="width: 55%" v-model="searchQuery.roleName" placeholder="角色名称"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="角色编码">
              <el-input style="width: 55%" v-model="searchQuery.roleCode" placeholder="角色编码"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData()">搜 索</el-button>
            <el-button type="info" icon="el-icon-refresh" size="mini" @click="resetData">重 置</el-button>

          </el-col>

        </el-row>
      </el-form>
    </div>

    <!-- 工具条 -->
    <div class="tools-div">
      <el-button type="success" icon="el-icon-plus" size="mini" @click="add()"
                 :disabled="$hasBP('bnt.sysRole.add')  === false"
      >添 加
      </el-button>
      <el-button type="danger" icon="el-icon-delete" size="mini" @click="batchRemove()"
                 :disabled="$hasBP('bnt.sysRole.remove')  === false"
      >批量删除
      </el-button>

    </div>

    <!-- 表格 -->
    <el-table v-loading="listLoading" :data="list" stripe border style="width: 100%;margin-top: 10px;"
              @selection-change="handleSelectionChange"
    >

      <el-table-column type="selection"/>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="roleName" label="角色名称" width="300"/>
      <el-table-column prop="roleCode" label="角色编码" width="300"/>
      <el-table-column prop="createTime" label="创建时间" width="350"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"
                     :disabled="$hasBP('bnt.sysRole.update')  === false"
          />
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"
                     :disabled="$hasBP('bnt.sysRole.remove')  === false"
          />
          <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignAuth(scope.row)"
                     title="分配权限"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination :current-page="page" :page-size="pageSize" style="padding: 30px 0; text-align: center;"
                   layout="total, prev, pager, next, jumper" :total="total" @current-change="fetchData"
    >
    </el-pagination>

    <!-- 弹框 -->
    <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
      <el-form ref="dataForm" :rules="formRules" :model="sysRole" label-width="150px" size="small"
               style="padding-right: 40px;"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="sysRole.roleName" placeholder="请输入角色名称"/>
        </el-form-item>
        <el-form-item label="角色编码" prop="roleCode">
          <el-input v-model="sysRole.roleCode" placeholder="请输入角色编码"/>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="sysRole.description" placeholder="请输入角色描述"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
// 引入定义接口的js文件
import api from '@/api/system/role'

export default {
  // 定义初始值
  data() {
    return {
      formRules: {
        roleName: [{ required: true, trigger: 'blur', message: '请输入角色名称' }],
        roleCode: [{ required: true, trigger: 'blur', message: '请输入角色编码' }]
      },
      list: [],  // 角色列表
      total: 0,  // 总记录数
      page: 1,   // 当前页
      pageSize: 5,  // 每页显示总记录数
      searchQuery: {},  // 条件查询封装对象

      dialogVisible: false, //是否弹出框
      sysRole: {},  // 封装添加表单数据
      selectValue: []  //复选框选择的内容
    }
  },

  // 周期函数，渲染页面之前调用
  created() {
    // 调用列表方法
    this.fetchData()
  },

  // 定义方法
  methods: {
    // 条件分页查询列表
    fetchData(pageNum = 1) {
      // 页数赋值
      this.page = pageNum   // pageNum: 查询页数
      // 发起ajax请求
      api.getPageList(this.page, this.pageSize, this.searchQuery)
        .then(response => {
          // console.log(response)
          // 每页数据列表
          this.list = response.data.records
          // 总记录数
          this.total = response.data.total
        })
    },

    // 重置
    resetData() {
      // 清空表单
      this.searchQuery = {}
      // 查询所有数据
      this.fetchData()
    },

    // 根据id删除
    removeDataById(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用方法删除
        api.removeById(id).then(response => {
          //提示信息
          this.$message({
            type: 'success',
            message: '删除成功!'
          })

          // 查询所有数据
          this.fetchData()
        })
      })
    },

    // 新增角色，弹框
    add() {
      this.dialogVisible = true
      this.sysRole = {}
    },

    // 新增或修改角色确定
    saveOrUpdate() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          //判断是添加还是修改
          if (!this.sysRole.id) {
            // 添加操作
            this.saveRole()
          } else {
            //修改操作
            this.updateRole()
          }
        }
      })
    },

    //新增角色
    saveRole() {
      api.saveRole(this.sysRole).then(response => {
        //提示信息
        this.$message({
          type: 'success',
          message: '添加成功！请为角色分配权限'
        })
        // 关闭弹框
        this.dialogVisible = false
        // 查询所有数据
        this.fetchData()
        // 跳转到分配角色路由
        this.$router.push('/system/assignAuth?id=' + response.data.id + '&roleName=' + response.data.roleName)
      })
    },

    // 修改按钮
    edit(id) {
      // 打开弹框
      this.dialogVisible = true
      // 发起ajax请求，得到单个角色信息
      api.getRoleById(id).then(response => {
        this.sysRole = response.data
      })
    },

    // 修改角色
    updateRole() {
      api.updateRole(this.sysRole).then(response => {
        //提示信息
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        // 关闭弹框
        this.dialogVisible = false
        // 查询所有数据
        this.fetchData()
      })
    },

    // 复选框发生变化
    handleSelectionChange(selection) {
      this.selectValue = selection
      console.log(this.selectValue)
    },

    // 批量删除
    batchRemove() {
      if (this.selectValue.length == 0) {
        //提示
        this.$message({
          type: 'warning',
          message: '请选择需要删除的数据!'
        })
        return
      }

      // 进行批量删除
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var idList = []
        // 获取多个复选框对应的id，封装到数组里
        for (var i = 0; i < this.selectValue.length; i++) {
          idList.push(this.selectValue[i].id)
        }

        // 调用方法删除
        api.batchRemove(idList).then(response => {
          //提示信息
          this.$message({
            type: 'success',
            message: '删除成功!'
          })

          // 查询所有数据
          this.fetchData()
        })
      })
    },

    // 分配权限按钮
    showAssignAuth(row) {
      this.$router.push('/system/assignAuth?id=' + row.id + '&roleName=' + row.roleName)
    }

  }
}
</script>
